<template>
    <div class="appTable">
        <div class="table">
            <div class="mask"></div>
            <div class="table_title">{{ table_title }}管理</div>
            <div class="table_btns" v-if="operate">
                <el-button @click="handleAdd" style="margin-right: 4%" type="primary" icon="el-icon-folder-add">添加</el-button>
            </div>
            <div class="table_body">
                <zy-table :loading="loading" :tableData="tableData" :tableColumn="tableColumn" :pageSize="pagination.pageSize" :total="pagination.total" @changePage="changePage"></zy-table>
            </div>
            <el-dialog :title="form_title" :modal-append-to-body="false" :visible.sync="isShow" width="45%" :lock-scroll="true" :close-on-click-modal="false">
                <div class="dialog">
                    <el-form label-width="120px">
                        <el-form-item label="定义名称">
                            <el-input v-model="acqName"></el-input>
                        </el-form-item>
                        <el-form-item label="轴数">
                            <el-radio-group v-model="axesSelected" size="mini" @input="handleInput">
                                <el-radio-button v-for="item in axes" :label="item.label"></el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item v-for="item in formConfig" :key="item" :label="item.label">
                            <div v-for="i in item.form">
                                <el-col :span="11" :key="i" :label="i.label">
                                    <el-select v-show="i.type === 'select' && axesSelected === '单轴'" clearable :multiple="item?.multiple ?? false" :placeholder="i.label" v-model="form1[item.name][i.value]">
                                        <el-option v-for="i1 in i.options" :key="i1.value" :label="i1.label" :value="i1.value"></el-option>
                                    </el-select>
                                    <el-select v-show="i.type === 'select' && axesSelected === '三轴'" clearable :multiple="item?.multiple ?? false" :placeholder="i.label" v-model="form3[item.name][i.value]">
                                        <el-option v-for="i1 in i.options" :key="i1.value" :label="i1.label" :value="i1.value"></el-option>
                                    </el-select>
                                    <el-input v-show="i.type === 'input' && axesSelected === '单轴'" :placeholder="i.label" v-model="form1[item.name][i.value]"></el-input>
                                    <el-input v-show="i.type === 'input' && axesSelected === '三轴'" :placeholder="i.label" v-model="form3[item.name][i.value]"></el-input>
                                </el-col>
                                <el-col :span="1">&nbsp;</el-col>
                            </div>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="submit">提交</el-button>
                            <!-- <el-button @click="() =>
                this.isShow = false">
                                取消
                            </el-button> -->
                        </el-form-item>
                    </el-form>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { requestApi } from '@/requset/api'
import { form1, form3, column, singConfig, threeConfig, axes } from './formConfig.js'
import BasicManage from '@/components/basic/BasicManage.vue'

import { deepClone } from '@/plugins/clone'
export default {
    extends: BasicManage,
    data() {
        return {
            table_title: '采集定义',
            active_id: null,
            form_title: '',
            acqName: '',
            url: 'waveacq',
            isShow: false,
            activeName: 'single',
            formConfig: null,
            axes: null,
            axesSelected: '单轴',
            form1: {
                long_wave: {
                    sam_len: null,
                    sam_fre: null,
                },
                acc_wave: {
                    sam_len: null,
                    sam_fre: null,
                },
                vel_wave: {
                    sam_len: null,
                    sam_fre: null,
                },
                eig_par: {
                    sam_len: null,
                    sam_fre: null,
                },
            },
            form3: {
                long_wave: {
                    sam_len: null,
                    sam_fre: null,
                },
                acc_wave: {
                    sam_len: null,
                    sam_fre: null,
                },
                vel_wave: {
                    sam_len: null,
                    sam_fre: null,
                    sam_len_c: null,
                    sam_fre_c: null,
                },
                eig_par: {
                    sam_len: null,
                    sam_fre: null,
                    sam_len_c: null,
                    sam_fre_c: null,
                },
            },
        }
    },

    methods: {
        getlist() {
            this.loading = true
            requestApi('post', this.url + `/getlist`, this.queryForm, false)
                .then((res) => {
                    if (res.data.code == 0) {
                        this.tableData = res.data.data
                        this.tableData.map((e) => {
                            e.single_axis = JSON.parse(e.single_axis)
                            e.three_axis = JSON.parse(e.three_axis)
                        })
                        this.pagination = res.data.pagination
                    }
                })
                .finally(() => {
                    this.loading = false
                })
        },
        handleAdd() {
            this.isShow = true
            this.acqName = ''
            this.form_title = '添加'
            this.form1 = deepClone(form1)
            this.form3 = deepClone(form3)
        },
        handleEdit(val) {
            this.active_id = val.id
            this.isShow = true
            this.acqName = val.name

            this.form_title = '编辑'
            this.form1 = deepClone(val.single_axis)
            this.form3 = deepClone(val.three_axis)
        },
        handleInput(e) {
            if (e === '三轴') this.$set(this, 'formConfig', threeConfig)
            else this.$set(this, 'formConfig', singConfig)
        },
        submit() {
            let url, obj
            if (this.form_title === '编辑') {
                url = 'waveacq/edit'
                obj = {
                    id: this.active_id,
                    name: this.acqName,
                    single_axis: JSON.stringify(this.form1),
                    three_axis: JSON.stringify(this.form3),
                }
            } else {
                url = 'waveacq/add'
                obj = {
                    name: this.acqName,
                    single_axis: JSON.stringify(this.form1),
                    three_axis: JSON.stringify(this.form3),
                }
            }
            requestApi('post', url, obj, false).then((res) => {
                if (res.data.code === 0) {
                    this.$message.success('添加成功')
                    this.getlist()
                    this.isShow = false
                }
            })
        },
    },

    created() {
        column[column.length - 1].buttons = [
            {
                text: '编辑',
                click: (val) => {
                    this.handleEdit(val)
                },
                icon: 'el-icon-edit',
            },
            {
                text: '删除',
                click: (val) => {
                    this.delete(val)
                },
                icon: 'el-icon-delete',
            },
        ]
        column[column.length - 1].if = this.operate

        this.tableColumn = column
        this.formConfig = singConfig
        this.form1 = deepClone(form1)
        this.form3 = deepClone(form3)
        this.axes = axes
        this.getlist()
    },
}
</script>

<style lang="less">
.dialog {
    width: 82%;
}
</style>
